<template>
  <div id="printOrder" class="printOrderTwo">
    <section id="printOrderWrapper" class="printOrderWrapperTwo">
      <div class="rowBox1">
        <h1 class="rowBox1-label">特快专递</h1>
        <canvas id="barcode1"></canvas>
      </div>

      <div class="rowBox2">{{ route_code }}</div>

      <div class="rowBox4">
        <div class="rowBox4-cxt-box">
          <span class="rowBox4-label">收:</span>
          <span class="rowBox4-cxt-name">{{ taker.username }}</span>
          <span class="rowBox4-cxt-tel">{{ taker.tel }}</span>
        </div>
        <span class="rowBox4-address">{{ take_address }}</span>
        <span class="rowBox4-address">{{ take_DetailAddress }}</span>
      </div>

      <div class="rowBox9">
        <div class="rowBox9-cxt-box">
          <span class="rowBox9-label">寄:</span>
          <span class="rowBox9-cxt-name">{{ deliver.username }}</span>
          <span class="rowBox9-cxt-tel">{{ deliver.tel }}</span>
        </div>
        <span class="rowBox9-address">{{ deliver_address }}</span>
        <span class="rowBox9-address">{{ deliver_DetailAddress }}</span>
      </div>

      <div class="rowBox5">
        <div class="rowBox5-left">
          <p>付款方式</p>
          <p>计费重量（KG）：</p>
          <p>保价金额（元）：</p>
        </div>
        <div class="rowBox5-right">
          <p class="rowBox5-right-1">收件人/代收人</p>
          <p>
            <span>签收时间：</span>
            <span class="span-time">年</span>
            <span>月</span>
            <span class="span-time">日</span>
            <span>时</span>
          </p>
          <!-- <p class="rowBox5-right-3">
            快递送达收货人地址，经收件人或收件人允许的代收人签字视为送达。
          </p> -->
        </div>
      </div>

      <div class="rowBox11">
        <div class="rowBox11-left">
          <span>订单号：</span>
          <canvas id="barcode3" class="barcode3Two"></canvas>
          <span class="rowBox11-span">件数：</span>
          <span>重量（KG）：</span>
        </div>
        <p>
          <span>配货信息：</span>
          <span>{{ remark }}</span>
        </p>
      </div>

      <div class="span-line"></div>

      <div class="rowBox6">
        <canvas id="barcode2" class="barcode2Two"></canvas>
      </div>

      <div class="rowBox7">
        <div class="rowBox7-right">
          <p class="rowBox7-cxt-box">
            <span class="rowBox7-left">收:</span>
            <span class="rowBox7-cxt-name">
              {{ taker.username }} {{ taker.tel }}
            </span>
            <span class="rowBox7-address">
              {{ take_address }} {{ take_DetailAddress }}
            </span>
          </p>
        </div>
        <section class="rowBox7-right rowbox7-content">
          <p class="rowBox7-cxt-box">
            <span class="rowBox7-left">寄:</span>
            <span class="rowBox7-cxt-name">
              {{ deliver.username }}{{ deliver.tel }}</span
            >
            <span class="rowBox7-address">
              {{ deliver_address }}{{ deliver_DetailAddress }}
            </span>
          </p>
        </section>
      </div>

      <p class="note">备注：{{ remark }}</p>

      <p class="note-last">
        <span>网址：www.ems.com.cn</span>
        <span>客服电话：11183</span>
      </p>
    </section>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
export default {
  name: 'printOrder',
  props: {
    order: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    route_code() {
      return this.order.route_code || ''
    },
    deliver() {
      return this.order.deliver_address || {}
    },
    deliver_address() {
      const { province, city, district, street } = this.deliver
      return [province, city, district, street].join('')
    },
    deliver_DetailAddress() {
      const { address } = this.deliver
      return address
    },
    taker() {
      return this.order.take_address || {}
    },
    take_address() {
      const { province, city, district, street } = this.taker
      return [province, city, district, street].join('')
    },
    take_DetailAddress() {
      const { address } = this.taker
      return address
    },
    tracking_number() {
      return this.order.tracking_number || ''
    },
    remark() {
      let books = this.order.books || []
      return books.map(({ book_name }) => `《${book_name}》 x 1`).join()
    }
  },
  methods: {
    createCode() {}
  },
  watch: {
    tracking_number(va) {
      if (va) {
        const opt = {
          format: 'CODE128A',
          height: 30,
          lineColor: '#000000',
          fontOptions: 'bolder', //使文字加粗体或变斜体
          fontSize: 30,
          textMargin: 1,
          background: 'transparent',
          margin: 20
        }
        JsBarcode('#barcode1', va, opt)
        JsBarcode('#barcode2', va, opt)
        JsBarcode('#barcode3', va, { ...opt, displayValue: false })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* <style id="printCss" scoped>*/
#printOrder {
  width: 11cm;
  min-height: 15cm;
  overflow: hidden;
  box-sizing: content-box;
  border: 2px solid #000;
  padding: 2mm;
  margin: auto;
}

#printOrderWrapper {
  border: 1px dashed #000;
  z-index: 1;
  background-color: #f8f8f8;
  word-break: break-all;
  overflow: hidden;
  box-sizing: border-box;
}
#printOrderWrapper p {
  margin: 0;
}
#barcode1 {
  height: 1.7cm;
  border-left: 1px solid;
}
#barcode2 {
  width: 50%;
  height: 100%;
}
#barcode3 {
  display: inline-block;
  width: 3cm;
  height: 0.5cm;
}

.printOrderTwo {
  width: 11cm;
  min-height: 15cm;
  overflow: hidden;
  box-sizing: content-box;
  border: 2px solid #000;
  padding: 2mm;
  margin: auto;
}
.printOrderWrapperTwo {
  border: 1px dashed #000;
  z-index: 1;
  background-color: #f8f8f8;
  word-break: break-all;
  overflow: hidden;
  box-sizing: border-box;
}
.printOrderWrapperTwo p {
  margin: 0;
}
.barcode1Two {
  height: 1.7cm;
  border-left: 1px solid;
}
.barcode2Two {
  width: 50%;
  height: 100%;
}
.barcode3Two {
  display: inline-block;
  width: 3cm;
  height: 0.5cm;
}

.rowBox2,
.rowBox6,
.rowBox8 {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.rowBox1 {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rowBox1-label {
  font-size: 20pt;
  text-align: center;
  font-weight: bold;
  flex-grow: 1;
}
.rowBox2 {
  text-align: center;
  height: 1cm;
  line-height: 1cm;
  font-weight: bolder;
  font-size: 24pt;
  overflow: hidden;
  border-bottom-width: 1px;
}

.rowBox4 {
  border-left: 0;
  border-right: 0;
  line-height: 1.1;
  font-size: 8pt;
  height: 1.6cm;
  padding: 0 0.1cm;
}
.rowBox4-cxt-box {
  padding: 0.1cm 0 0;
}
.rowBox4-label {
  width: 0.85cm;
  flex-shrink: 0;
  font-size: 13pt;
  font-weight: bold;
  padding: 0.1cm;
}

.rowBox4-cxt-name {
  margin-right: 0.5cm;
}

.rowBox4-address {
  padding: 0cm 0.1cm;
  font-size: 10px;
}

.rowBox5 {
  border-top: 1px solid;
  font-size: 8pt;
  overflow: hidden;
  display: flex;
}

.rowBox5-left {
  width: 40%;
  border-right: 1px solid;
  padding: 0.1cm 0.2cm;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: text-top;
}

.rowBox5-right {
  width: 58%;
  padding: 0.1cm 0.2cm;
  flex-grow: 1;
  display: inline-block;
  vertical-align: text-top;
}

.rowBox5-right-1 {
  padding-bottom: 0.1cm;
}

.rowBox5-right-3 {
  font-size: 4pt;
  display: flex;
  justify-content: center;
}

.rowBox6 {
  height: 1.5cm;
  overflow: hidden;
}

.rowBox7 {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid;
}

.rowbox7-content {
  border-left: 1px solid;
}

.rowBox7-left {
  flex-shrink: 0;
  text-align: center;
  font-weight: bold;
  margin-right: 0.1cm;
}

.rowBox7-right {
  padding: 0.1cm;
  width: 50%;
  // overflow: hidden;
  vertical-align: text-top;
  word-break: break-all;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: 1.5cm;
}

.qr-content {
  width: 2.5cm;
  height: 2.5cm;
  border-left: 1px solid;
  flex-shrink: 0;
}

.rowBox9 {
  line-height: 1.1;
  border-top: 1px solid;
  border-left: 0;
  border-right: 0;
  font-size: 8pt;
  height: 1.6cm;
  padding: 0 0.1cm;
}

.rowBox9-cxt-box {
  padding: 0.1cm 0 0;
}
.rowBox9-label {
  width: 0.85cm;
  flex-shrink: 0;
  font-size: 8pt;
  font-weight: bold;
  text-align: center;
  padding: 0.1cm;
}

.rowBox9-cxt-name {
  margin-right: 0.5cm;
}

.rowBox9-address {
  padding: 0cm 0.1cm;
  font-size: 10px;
}

.span-time {
  margin: 0.4cm;
}

.rowBox11 {
  border-top: 1px solid;
  font-size: 8pt;
  padding: 0.1cm;
  height: 2cm;
}

.rowBox11-left {
  word-break: break-all;
}

.rowBox11-span {
  margin: 0 0.7cm;
}

.span-line {
  height: 0.3cm;
  border-top: 1px solid;
}

.note {
  font-size: 8pt;
  padding: 0.1cm;
  display: block;
  width: 100%;
}

.note-last {
  font-size: 8pt;
  border-top: 1px solid;
}
.note-last > span {
  margin-right: 2cm;
}

.rowBox7-address {
  // height: 3cm;
  // overflow: hidden;
  font-size: 8pt !important;
}
.rowBox7-cxt-name {
  font-size: 8pt !important;
}
.rowBox7-cxt-box{
  min-height: 1.5cm;
}
</style>
